<script setup lang="ts">
import { ref } from 'vue'
import { useChat } from './composable'

// 本地启动的数字人服务
const digmanURL = ref('http://codeleilei.gitee.io/miui/digman.html')
const { play, history, problem } = useChat(digmanURL.value)
</script>

<template>
  <!-- 数字人嵌入 -->
  <iframe
    class="w-full border-none outline-none fixed left-0 top-0 h-screen z-0"
    :src="digmanURL"
    frameborder="0"
    scrolling="no"
  ></iframe>

  <!-- 首页布局排版 -->
  <div class="home h-full z-10 relative overflow-hidden">
    <!-- 数字人对话窗口 -->
    <ul
      id="chat-container"
      class="list-none flex flex-col overflow-scroll z-20 absolute h-[76vh] top-[10vh] text-[#f3f4d9] text-sm right-[70px] pr-3 w-[49%]"
    >
      <li
        :class="['chat mt-2 p-2 rounded-md ', { 'tourist self-end': chat.role === 'tourist' }]"
        v-for="(chat, index) in history"
        :style="{ width: chat.role === 'tourist' ? '80%' : '100%' }"
        :key="index"
        :data-aos="chat.role === 'tourist' ? 'fade-left' : 'zoom-in'"
      >
        {{ chat.content }}
      </li>
    </ul>
    <!-- 左上角三个按钮 -->
    <div class="left absolute left-5 top-[10vh]" data-aos="fade-right">
      <div
        class="problem w-14 h-14 rounded-full hover:opacity-80"
        @click="$router.push('problem')"
      ></div>
      <div class="music w-14 h-14 rounded-full hover:opacity-80 mt-2"></div>
      <div class="voice w-14 h-14 rounded-full hover:opacity-80 mt-2"></div>
    </div>
    <!-- 右上方人物介绍 -->
    <div class="right absolute right-4 top-[10vh]" data-aos="fade-left">
      <div class="introduce-btn w-16 h-52 text-center flex items-center justify-center">
        <p class="w-5 text-xl mb-5 text-[#f3f4d9]" @click="$router.push('/introduce')">人物介绍</p>
      </div>
    </div>
    <!-- 底部输入框以及两个按钮 -->
    <div
      class="bottom z-20 fixed w-full bottom-8 left-1/2 -translate-x-1/2 flex items-center justify-center"
    >
      <div class="say w-14 h-14 min-w-[56px] rounded-full ml-3 mr-3" @click="play"></div>
      <input
        v-model="problem"
        class="input text-primary w-52 md:h-12 h-10 max-w-[60%] border-none outline-none p-2 pl-4 pr-3"
      />
      <div
        class="menu w-14 h-14 min-w-[56px] rounded-full mr-3 ml-3"
        @click="$router.push('/functions')"
      ></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
*::-webkit-scrollbar {
  display: none;
}
.chat {
  background: rgba(0, 0, 0, 0.2);
}
.tourist {
  background: #61a4754d;
}
.problem {
  background: url('../../assets/img/problem.png');
}

.music {
  background: url('../../assets/img/music.png');
}

.voice {
  background: url('../../assets/img/voice.png');
}

.introduce-btn {
  background: url('../../assets/img/tooltip.png');
}

.say {
  background: url('../../assets/img/say.png');
}

.menu {
  background: url('../../assets/img/menu.png');
}

.input {
  background: url('../../assets/img/input.png');
}

.say,
.menu,
.input,
.problem,
.music,
.introduce-btn,
.voice {
  background-size: 100% 100%; // 让图片按照元素的宽高比进行显示
}
</style>
